<template>
  <el-container>
    <!--新增标签-->
    <el-dialog
      title="新增运费"
      v-el-drag-dialog
      :visible.sync="dialogFormVisible"
      width="550px"
    >
      <el-container>
        <el-main class="popup_content">
          <el-form
            ref="addFreight"
            :model="addFreight"
            size="mini"
            :rules="rules"
            label-width="80px"
          >
            <el-form-item label="运费名称" prop="name">
              <el-input
                v-model="addFreight.name"
                style="width: 150px"
              ></el-input>
            </el-form-item>
            <el-form-item label="运费类型" prop="status">
              <el-select
                v-model="addFreight.type"
                placeholder="请选择类型"
                style="width: 150px"
              >
                <el-option
                  v-for="item in freightType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-main class="popup_content">
        
              <div class="freightsettings"
                style="
                  font-weight: 600;
                  margin-left: 25px;
                  color: rgb(96, 98, 102);

                  margin-bottom: 20px;
                "
                v-if="addFreight.type === 2"
              >
                <span>起步</span
                ><el-input
                  v-model="addFreight.ykg"
                  style="width: 50px"
                  type="number"
                ></el-input>
                <span>公里之内</span>
                <el-input
                  v-model="addFreight.ykgPrice"
                  style="width: 50px"
                  type="number"
                ></el-input
                ><span>元</span> <span>，每增加1公里加收</span>
                <el-input
                  v-model="addFreight.ctdPrice"
                  style="width: 50px"
                  type="number"
                ></el-input
                ><span>元</span>
              </div>
              <div class="freightsettings"
                style=" font-weight: 600;margin-left: 25px;color: rgb(96, 98, 102);margin-bottom: 20px;"
                v-if="addFreight.type == 1 || addFreight.type == ''"
              >
                <span>起步</span
                ><el-input
                  v-model="addFreight.ykg"
                  style="width: 50px"
                  type="number"
                ></el-input>
                <span>件之内</span>
                <el-input
                  v-model="addFreight.ykgPrice"
                  style="width: 50px"
                  type="number"
                ></el-input
                ><span>元</span> <span>，每增加1件加收</span>
                <el-input
                  v-model="addFreight.ctdPrice"
                  style="width: 50px"
                  type="number"
                ></el-input
                ><span>元</span>
              </div>

              <el-form-item label="包装费" prop="packagingFee	">
                <el-input
                  v-model="addFreight.packagingFee"
                  style="width: 150px"
                  type="number"
                ></el-input><span style='margin-left:10px; font-weight: 600;'>(元/每件)</span>
              </el-form-item>
            </el-main>
          </el-form>
        </el-main>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-row>
          <!-- <el-col :span="2" style="margin-right: auto"><el-button type="primary"  :loading="clicked" @click="addCity()">添加</el-button></el-col> -->
          <el-col :span="22">
            <el-button @click="cancel">取 消</el-button>
            <el-button
              type="primary"
              :loading="clicked"
              @click="saveFreight('addFreight')"
              >确 定</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { EventBus } from "@/api/eventBus";
import elDragDialog from "@/directive/el-drag-dialog";
import { save } from "../../api/freight";
import province from "../../components/Distpicker/province"; // base on element-ui
export default {
  directives: { elDragDialog },
  name: "freight-add",
  data() {
    return {
      addFreight: {
        ctdPrice: "",
        ctd: "",
        ykg: "",
        ykgPrice: "",
        type: 2,
        name: "",
        levelStart: 0,
        enabledLevel: false,
        packagingFee: "",
        levelFreight: 0,
      },
      rules: {
        name: [{ required: true, message: "请输入运费名称", trigger: "blur" }],
      },
      itemList: [],
      // options:[],
      dialogFormVisible: false,
      clicked: false,
      freightTable: [],
      freightType: [
        {
          value: 1,
          label: "计件",
        },
        {
          value: 2,
          label: "距离",
        },
      ],
    };
  },

  created() {
    let cityList = [];
 
  },
  methods: {
    // deleteFreightTable(index){

    //   this.freightTable.splice(index, 1)
    //   // this.itemList.splice(index,1)
    // },
    cancel() {
      this.dialogFormVisible = false;
      this.addFreight.name = "";
      this.freightTable = [];
    },
    clean() {
      this.addFreight.name = "";
      this.addFreight.packagingFee = "";
      this.addFreight.ykg = "";
      this.addFreight.ykgPrice = "";
      this.addFreight.ctd = "";
      this.addFreight.ctdPrice = "";
      // this.freightType=''
      this.addFreight.type = "";
    },
    // getnull(){
    //   this.addFreight={}
    //    this.addFreight.type=2
    //    this.addFreight.levelStart=0,
    //    this.addFreight.enabledLevel=false
    //    this.addFreight.levelFreight=0
    // },
    // formatCity(ARR,array){
    //   for (const key in ARR) {
    //     let obj={}
    //     obj.value=key;
    //     obj.label=ARR[key];
    //     array.push(obj);
    //     if(province[key]){
    //       obj.children=[]
    //       this.formatCity(province[key],obj.children)
    //     }
    //   }
    // },
    // addCity(){

    //   var freightTable={
    //     createDate:new Date(),
    //     modifyDate:new Date(),
    //     type:this.addFreight.type,
    //     ykg:'',
    //     levelFreight:0,
    //     enabledLevel:this.enabledLevel,
    //     areaId:'',
    //     ctd:'',
    //     ctdPrice:'',
    //     levelStart:0,
    //     ykgPrice:'',
    //   }
    //   if (freightTable.levelStart){
    //     this.enabledLevel=true
    //   }else {
    //     this.enabledLevel=false
    //   }
    //   this.freightTable.push(freightTable)
    //   if (this.freightTable.length>1){
    //     this.itemList.push(freightTable)
    //   }
    // },
    addFreightClick() {
      this.dialogFormVisible = true;
    },
    saveFreight(addFreight) {
      this.$refs[addFreight].validate((valid) => {
        if (valid) {
          // 校验表单
          this.clicked = true;
          let params = new URLSearchParams();
          console.log(this.addFreight);

          this.addFreight.ctd = 1;

          save(this.addFreight, params)
            .then((response) => {
              this.clicked = false;
              this.dialogFormVisible = false;
              console.log(response);

              this.$emit("loadFreight");
              EventBus.$emit("freight-add", response.data);
            })
            .catch((error) => {
              this.clicked = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // saveFreight(addFreight){
    //   this.$refs[addFreight].validate((valid)=>{
    //     if (valid){
    //       this.clicked=true
    //       let freight={
    //         createDate:new Date(),
    //         modifyDate:new Date(),
    //         name:this.addFreight.name,
    //         type:this.addFreight.type,
    //         ykg:'',
    //         levelFreight:0,
    //         enabledLevel:'',
    //         ctd:'',
    //         ctdPrice:'',
    //         levelStart:0,
    //         ykgPrice:'',
    //         itemList:[]
    //       }
    //       if(this.freightTable.length>1){
    //         this.freightTable.splice(0,1)
    //         freight.itemList=this.freightTable
    //       }

    //       freight.ykg= this.freightTable[0].ykg
    //       freight.levelFreight= this.freightTable[0].levelFreight
    //       freight.ctd= this.freightTable[0].ctd
    //       freight.ctdPrice= this.freightTable[0].ctdPrice
    //       freight.levelStart= this.freightTable[0].levelStart
    //       freight.ykgPrice= this.freightTable[0].ykgPrice
    //       if (freight.levelStart>0){
    //         this.enabledLevel=true
    //       }else {
    //         this.enabledLevel=false
    //       }
    //       freight.enabledLevel=this.enabledLevel
    //       if (freight.ykg==''||freight.ctd==''||freight.ctdPrice==''||freight.ykgPrice==''){
    //         this.$message.error('请完善运费模板信息');
    //         this.clicked=false
    //         return
    //       }else{
    //         save(freight).then(response=>{
    //           this.clicked=false
    //           this.dialogFormVisible=false
    //           this.$emit('loadFreight')
    //           EventBus.$emit('freight-add', response.data)
    //         })
    //       }
    //     }
    //   })

    // },
  },
};
</script>

<style scoped>
.freightsettings span{
    margin-left: 5px;
    margin-right: 5px;
}
.popup_content {
  padding-bottom: 0px !important;
}
.el-footerBox {
  height: 50px !important;
  line-height: 50px !important;
  border-top: 1px solid #eeeeee;
}

/deep/ .el-dialog__header {
  border: 1px solid #eeeeee !important;
  padding: 15px !important;
}

/deep/ .el-dialog__body {
  padding: 0px 20px !important;
  margin-top: 20px;
  margin-bottom: 10px;
}
/deep/.el-main {
  padding: 0px;
}
</style>
